<template>
  <div class="h-full water-content">
    <RightContent
      :record="modalParams.record"
      ref="rightContentRef"
      :scan="false"
      :userName="userName"
    >
      <div class="border details-row">
        <div class="row-col">
          <p>质检总数：{{ verificationResult.total }}</p>
        </div>
        <div class="row-col"
          ><p> 已检数：{{ verificationResult.finishCheck }}</p>
        </div>
        <div class="row-col">
          <p style="color: green">合格数：{{ verificationResult.qualified }}</p>
        </div>
        <div class="row-col">
          <p style="color: #ff0000">不合格数：{{ verificationResult.unqualified }}</p>
        </div>
      </div>
    </RightContent>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
  // import LeftContent from './components/LeftContent.vue';
  import RightContent from '../water-box/components/RightContent.vue';
  import { ModalParams } from '/@/components/ModelTable/src/types';
  import { UpToStandard } from '../water-box/types';
  import { getCountResult } from '/@/api/jd/water-box';
  import { useUserStore } from '/@/store/modules/user';
  const userStore = useUserStore();

  const props = defineProps({
    modalParams: {
      type: Object as PropType<ModalParams>,
      default: () => {},
    },
  });
  const rightContentRef = ref<any>(null);

  const userName = computed(() => userStore?.getUserInfo?.name ?? '');

  let timer: any = null;
  const verificationResult = ref<UpToStandard>({});
  // 获取检定统计
  const getVerificationResult = async () => {
    verificationResult.value = await getCountResult({ taskId: props?.modalParams.record?.task_id });
  };
  //  定时刷新页面数据
  const refreshPage = () => {
    if (rightContentRef.value) {
      timer = setInterval(() => {
        getVerificationResult();
        const { restApi, activeKey, setTableLoading } = rightContentRef.value;
        setTableLoading(activeKey, false);

        restApi && restApi?.[activeKey]?.reload();
      }, 3000);
    }
  };

  onMounted(async () => {
    getVerificationResult();
    await nextTick();
    refreshPage();
  });

  onUnmounted(() => {
    clearInterval(timer);
    timer = null;
  });
</script>

<style lang="less" scoped>
  .water-content {
    display: flex;

    .border-com {
      border: 1px solid #f0f0f0;
      border-radius: 4px;
      box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1);
    }

    .border {
      .border-com;
      padding: 4px 12px;
      overflow-y: auto;
    }

    .details-row {
      display: flex;
      flex-wrap: wrap;
      margin-left: -6px;
      margin-right: -6px;
      width: 30%;

      .row-col {
        width: 50%;
        padding: 4px 0;
      }
    }

    :deep(.right-content) {
      width: 100%;

      .row-r {
        width: 70%;

        .row-col {
          width: calc(100% / 3);
        }
      }
    }

    :deep(.vben-basic-table-form-container) {
      padding: 0;
    }
  }
</style>
